<script setup lang="ts">
import { useRouter } from 'vue-router'

// 基础属性
const props = defineProps<{
  title?: string
  rightText?: string
  // 知识点：函数类型的props。场景：弹出层的回退（一些“异步”的操作，可以把参数值定义为函数，在需要的时候调用函数即可）
  // popup组件的弹出只是单纯弹出页面并展示，不会改变路由历史记录，所以需要手动设置它的回退（关闭弹窗即可）
  popupBack?: () => void
}>()

// 右侧点击事件
type Emits = {
  (e: 'click-right'): void
}
// 知识点：props两种使用方式，泛型和参数形式，本项目使用泛型形式
// const emit = defineEmits(['send-msg']) --这是参数形式
const emit = defineEmits<Emits>()
const onClickRight = () => {
  emit('click-right')
}

// 回退
const router = useRouter()
const onClickLeft = () => {
  if (props.popupBack) return props.popupBack()

  // 知识点：判断是否有页面跳转记录
  if (history.state.back) {
    // 返回前一页
    router.back()
  } else {
    // 返回首页
    router.push('/')
  }
}
</script>

<template>
  <div>
    <van-nav-bar
      fixed
      :title="title"
      :right-text="rightText"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />
  </div>
</template>

<style scoped>
:deep() {
  .van-icon-arrow-left {
    color: var(--cp-text1);
  }
  .van-nav-bar__text {
    color: var(--cp-primary);
  }
  .van-nav-bar__title {
    font-size: 15px;
  }
}
</style>
